<template>
  <a-tabs style="width: 305px" size="small">
    <template #extra>
      <span class="clear" @click="handleAllRead"><img src="~@/assets/clear.png" class="icon" /> 全部已读</span>
    </template>
    <a-tab-pane key="notice">
      <template #title>
        <a-badge :count="userStore.buzMsgUnreadCount" :max-count="999" :offset="[12, 0]">
          <span> 通知 </span>
        </a-badge>
      </template>
      <!-- 1业务通知，2系统消息 -->
      <MessageList ref="buzMessageListRef" msgType="1" />
    </a-tab-pane>
    <a-tab-pane key="message">
      <template #title>
        <a-badge :count="userStore.sysMsgUnreadCount" :max-count="999" :offset="[12, 0]">
          <span> 消息 </span>
        </a-badge>
      </template>
      <MessageList ref="sysMessageListRef" msgType="2" />
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  import MessageList from './message-list.vue'
  import useUserStore from '@/store/modules/user'
  import { readAllMsg } from '@/api/common'

  export default defineComponent({
    components: {
      MessageList,
    },
    setup() {
      const userStore = useUserStore()

      // 全部已读
      const buzMessageListRef = ref()
      const sysMessageListRef = ref()
      const handleAllRead = () => {
        readAllMsg().then((res: any) => {
          if (res.code == 200) {
            userStore.updateUnreadMsgCount()
            buzMessageListRef.value && buzMessageListRef.value.clearMsg(false)
            sysMessageListRef.value && sysMessageListRef.value.clearMsg(false)
          }
        })
      }

      return {
        buzMessageListRef,
        sysMessageListRef,
        userStore,
        handleAllRead,
      }
    },
  })
</script>
<style lang="less" scoped>
  :deep(.arco-list-medium > .arco-list-content > .arco-list-item) {
    padding: 0 !important;
  }
  .clear {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: #1d2129;
    .icon {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
    &:hover {
      color: #165dff;
    }
  }
</style>
